<template>
  <div class="gsap_scroll_container">
    <div class="scroll-spacer">
      <NewsItem></NewsItem>
    </div>

    <div class="horizontal-container" ref="horizontalContainer">
      <div class="panel" v-for="(item, index) in items" :key="index" ref="panels">
        <div class="content" ref="contents">
          <h2>{{ item.title }}</h2>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </div>
    <div class="scroll-spacer"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger);

// 内容数据
const items = ref([
  {
    title: "第一部分",
    description: "这是第一部分的详细描述，当滚动到中间时会放大显示",
    color: getRandomColor(), // 添加随机颜色
  },
  {
    title: "第二部分",
    description: "这是第二部分的详细描述，当滚动到中间时会放大显示",
    color: getRandomColor(),
  },
  {
    title: "第三部分",
    description: "这是第三部分的详细描述，当滚动到中间时会放大显示",
    color: getRandomColor(),
  },
  {
    title: "第四部分",
    description: "这是第四部分的详细描述，当滚动到中间时会放大显示",
    color: getRandomColor(),
  },
]);

// 生成随机颜色函数
function getRandomColor() {
  // 生成柔和的颜色
  const hue = Math.floor(Math.random() * 360);
  const saturation = 60 + Math.floor(Math.random() * 20); // 60-80%
  const lightness = 75 + Math.floor(Math.random() * 15); // 75-90%
  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

// 引用元素
const horizontalContainer = ref(null);
const panels = ref([]);
const contents = ref([]);

// ScrollTrigger 实例
let scrollTriggerInstance: any = null;

onMounted(() => {
  if (typeof window === "undefined") return;

  // 确保在DOM更新后执行
  setTimeout(() => {
    // 设置水平滚动动画
    const totalPanels = panels.value.length;

    // 计算水平容器的总宽度 - 每个面板占屏幕宽度的一半
    const totalWidth = totalPanels * 50; // 修改为50%，与CSS保持一致

    // 设置水平容器的宽度
    gsap.set(horizontalContainer.value, { width: `${totalWidth}vw` }); // 使用vw单位确保与面板宽度单位一致

    // 创建水平滚动动画
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: horizontalContainer.value,
        pin: true,
        start: "top top",
        // 增加滚动距离，使水平移动速度变慢
        end: () => `+=${(totalPanels - 1) * 200}vw`, // 将滚动距离增加一倍 这样同样的水平移动距离需要更长的垂直滚动才能完成，从而减慢了水平移动速度
        scrub: 1, // 增加平滑度，使动画更加流畅
        markers: true, // 添加标记以便调试
      },
    });

    // 添加水平滚动动画
    tl.to(horizontalContainer.value, {
      x: () => `-${(totalPanels - 2) * 50}vw`, // 保持移动距离不变 使用vw单位
      ease: "power1.inOut", // 使用更平滑的缓动函数
    });

    // 为每个面板添加文字缩放效果
    panels.value.forEach((panel, i) => {
      const content = contents.value[i];

      // 设置面板背景颜色
      gsap.set(panel, { backgroundColor: items.value[i].color });

      // 初始化内容的缩放比例为1
      gsap.set(content, { scale: 1 });

      // 创建与滚动进度关联的动画
      ScrollTrigger.create({
        trigger: panel,
        containerAnimation: tl,
        start: "left right", // 从面板进入视口开始
        end: "right left", // 到面板离开视口结束
        onUpdate: (self) => {
          // 计算面板在视口中的位置
          // console.log(self);
          const progress = self.progress;

          // 使用更平滑的缩放曲线
          // 使用正弦曲线来创建更自然的缩放效果
          let scale;
          if (i === 2) {
            console.log(progress);
          }
          if (progress < 0.3) {
            // 进入阶段：使用缓入函数
            const normalizedProgress = progress / 0.3; // 0-1范围
            scale = 1 + 0.5 * Math.sin((normalizedProgress * Math.PI) / 2);
          } else if (progress > 0.7) {
            // 离开阶段：使用缓出函数
            const normalizedProgress = (progress - 0.7) / 0.3; // 0-1范围
            scale = 1 + 0.5 * Math.cos((normalizedProgress * Math.PI) / 2);
          } else {
            // 中间阶段：保持1.5
            scale = 1.5;
          }

          // 应用缩放效果，使用更长的持续时间和更平滑的缓动
          gsap.to(content, {
            scale: scale,
            duration: 0.4, // 增加持续时间，使过渡更平滑
            ease: "power2.out", // 使用更平滑的缓动函数，提供更自然的加速和减速
            overwrite: "auto", // 自动处理重叠的动画
          });
        },
      });
    });

    // 保存 ScrollTrigger 实例以便清理
    scrollTriggerInstance = ScrollTrigger.getAll();
  }, 100); // 短暂延迟确保DOM已更新
});

onBeforeUnmount(() => {
  // 清理 ScrollTrigger
  if (scrollTriggerInstance) {
    scrollTriggerInstance.forEach((trigger: any) => trigger.kill());
  }
  ScrollTrigger.killAll();
});
</script>

<style lang="scss" scoped>
.gsap_scroll_container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.scroll-spacer {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.horizontal-container {
  display: flex;
  flex-wrap: nowrap;
  height: 100vh;
  // 移除固定宽度，让JavaScript动态设置
}

.panel {
  width: 50vw; // 使用vw单位，确保每个面板宽度为视口宽度的一半
  min-width: 50vw; // 确保最小宽度也使用相同单位
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; // 确保不会被压缩
  transition: background-color 0.5s ease; // 添加背景色过渡效果

  // 移除原来的固定背景色
  // &:nth-child(1) { background-color: #f8e9e9; }
  // &:nth-child(2) { background-color: #e9f8f2; }
  // &:nth-child(3) { background-color: #e9eef8; }
  // &:nth-child(4) { background-color: #f8f6e9; }
}

.content {
  text-align: center;
  padding: 1rem;
  border-radius: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 50%;
  will-change: transform; // 优化性能

  h2 {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #333;
  }

  p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #666;
  }
}
</style>
